<template>
  <div class="welcome">
    <!-- 个人头像、天数统计 -->
    <div class="info">
      <div class="self">
        <p class="logout" @click="handleLogout"><img src="~/assets/images/profile-logout.png" alt="" />退出</p>
        <img class="avatar" :src="userInfo.avatar" alt="" />
        <p class="username">{{ userInfo.nickname }}</p>
        <div class="vip">
          <div class="level">
            {{ grade_title }}
            <img src="~/assets/images/profile-vip.png" alt="" />
          </div>
          <a
            class="upgrade"
            href="javascript:;"
            @click="$router.push({ name: 'VipBenefits' })"
          >
            升级会员
          </a>
        </div>
      </div>

      <div class="statistics">
        <div class="title">今天是您在“找包装网”的第{{ todoList.day || 0 }}天！</div>
        <div class="content">
          <div class="item total-count">
            <div class="count">
              {{ todoList.total_order_num || 0 }}
              <div class="unit">笔</div>
            </div>
            总订单数
          </div>
          <div class="item total-supplier">
            <div class="count">
              {{ todoList.total_mer_num || 0 }}
              <div class="unit">家</div>
            </div>
            采购供应商
          </div>
          <div class="item total-purchase">
            <div class="count">
              {{ todoList.total_price || 0 }}
              <div class="unit">元</div>
            </div>
            总采购额
          </div>
        </div>
      </div>
    </div>
    <!-- 待办事项 -->
    <div class="todo">
      <div class="title">待办事项</div>
      <div class="content">
        <div class="item to-be-processed">
          <div class="count">
            {{ todoList.nopaid_order_num || 0 }}
            <div class="unit">笔</div>
          </div>
          <div class="name">待处理订单</div>
          <a
            href="javascript:;"
            class="button"
            @click="$router.push({ name: 'MyOrder' })"
          >
            去处理
          </a>
        </div>
        <div class="item to-be-processed">
          <div class="count">
            {{ todoList.inquiry || 0 }}
            <div class="unit">条</div>
          </div>
          <div class="name">待处理询价</div>
          <a
            href="javascript:;"
            class="button"
            @click="$router.push({ name: 'MyInquiry' })"
          >
            去处理
          </a>
        </div>
        <div class="item to-be-processed">
          <div class="count">
            {{ todoList.demand_1 || 0 }}
            <div class="unit">条</div>
          </div>
          <div class="name">待发布需求</div>
          <a
            href="javascript:;"
            class="button"
            @click="$router.push({ name: 'MyDemand' })"
          >
            去发布
          </a>
        </div>
        <div class="item to-be-processed">
          <div class="count">
            {{ todoList.demand_2 || 0 }}
            <div class="unit">条</div>
          </div>
          <div class="name">待发布委托</div>
          <a
            href="javascript:;"
            class="button"
            @click="$router.push({ name: 'MyConsign' })"
          >
            去发布
          </a>
        </div>
        <div class="item to-be-processed">
          <div class="count">
            {{ todoList.news_num || 0 }}
            <div class="unit">条</div>
          </div>
          <div class="name">未读消息</div>
          <a
            href="javascript:;"
            class="button"
            @click="$router.push({ name: 'MyMessage' })"
          >
            去查看
          </a>
        </div>
      </div>
    </div>

    <!-- 我的权益 -->
    <div class="rights">
      <div class="title">
        我的权益
        <router-link class="more" :to="{ name: 'VipBenefits' }">
          更多权益<img src="~/assets/images/right-arrow.png" alt=""/>
        </router-link>
      </div>
      <div class="content">
        <div class="item" v-for="(item, index) in rights" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="price">{{ item.count }}/{{item.total_count}}</div>
          <div class="unit">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    
    <!-- 我的采购 -->
    <div class="purchase">
      <div class="title">我的采购</div>
      <div class="content">
        <div class="line-chart">
          <div class="title">历史采购额（过去36个月）</div>
          <div id="line-chart" class="line-chart"></div>
        </div>
        <div class="ranking">
          <div class="item supplier">
            <div class="title">
              TOP10供应商（过去12个月）
              <a class="button" href="javascript:;" @click="$router.push('/profile/expenditure-management/my-supplier')">
                查看所有
                <img src="~/assets/images/right-arrow-white.png" alt="" />
              </a>
            </div>
            <div class="list">
              <div  class="list-item" v-for="(item, index) in shopsList" :key="index">
                <div class="index">{{ index + 1 }}.</div>
                <div class="name">{{ item.mer_name }}</div>
                <div class="value">{{ item.total_price }}元</div>
              </div>
            </div>
          </div>
          <div class="item product">
            <div class="title">
              TOP10品类（过去12个月）
              <a class="button" href="javascript:;" @click="$router.push('/profile/expenditure-management/my-supplier')">
                查看所有
                <img src="~/assets/images/right-arrow-white.png" alt=""/>
              </a>
            </div>
            <div class="list">
              <div class="list-item" v-for="(item, index) in productsList" :key="index">
                <div class="index">{{ index + 1 }}.</div>
                <div class="name">{{ item.store_name }}</div>
                <div class="value">{{ item.product_price }}元</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCountLog,
  getCountBase,
  getMyVip,
  getMerchantLog,
  getProductLog,
  getuserEquitylst
} from "@/request/api"
import { mapMutations } from 'vuex'

export default {
  name: "Welcome",
  data() {
    return {
      userInfo: {},
      grade_title: "", // 用户会员等级
      echartsList: [],
      lineItem: [],
      optionData: [],
      todoList: {},
      shopsList: [], // top商铺
      productsList: [],
      rights: []
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    this.getLog()
    this.getCountBaseList()
    this.getUserMember()
    this.getLastLog()
  },
  methods: {
    ...mapMutations(['logout']),
    handleLogout(){
      this.logout()
      this.$router.go(0)
    },
    // 获取当前用户会员等级
    getUserMember() {
      getMyVip().then((res) => {
        if (res.status === 200) {
          this.grade_title = res.data.title
        } else {
          this.$message.error(res.message)
        }
      })
      getuserEquitylst().then(res => {
        this.rights = res.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 获取TOP10供应商（过去12个月）
    getLastLog() {
      getMerchantLog().then((res) => {
        if (res.status === 200) {
          this.shopsList = res.data
        }
      })
      getProductLog().then((res) => {
        if (res.status === 200) {
          this.productsList = res.data
        }
      })
    },
    // 获取历史采购额（过去36个月）
    getLog() {
      getCountLog().then((res) => {
        if (res.status === 200) {
          this.echartsList = res.data
          let lineItem = []
          let optionData = []
          this.echartsList.map((item) => {
            lineItem.push(`${item.year}年${item.month}月`)
            optionData.push(item.count)
          })
          this.lineItem = lineItem
          this.optionData = optionData
          this.initLineChart()
        }
      })
    },
    getCountBaseList() {
      getCountBase().then((res) => {
        if (res.status === 200) {
          this.todoList = res.data
        }
      })
    },
    initLineChart() {
      const echarts = this.$echarts.init(document.getElementById("line-chart"))
      const options = {
        xAxis: {
          type: "category",
          data: this.lineItem,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            params = params[0].data
            return params + "元"
          },
          axisPointer: {
            animation: false
          }
        },
        series: [
          {
            data: this.optionData,
            type: "line"
          }
        ],
        lineStyle: {
          color: "#E48B2C"
        }
      }
      echarts.setOption(options)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.welcome {
  width: 100%;

  // 公共 卡片框
  %card {
    height: 264px;

    > .title {
      height: 40px;
      border-bottom: solid 1px #e2e2e2;
      padding-left: 15px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      color: #666;
    }

    > .content {
      height: calc(100% - 40px);
    }
  }

  .info,
  .todo,
  .rights,
  .purchase {
    background-color: #fff;
  }

  .info {
    height: 260px;
    display: flex;
    margin-bottom: 40px;

    $self-width: 260px;
    $statistics-width: calc(100% - #{$self-width});

    .self {
      width: $self-width;
      height: 100%;
      border: solid 1px #e2e2e2;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: none;

      .logout {
        color: $theme-color-1;
        font-size: 14px;
        position: absolute;
        left: 0;
        top: 0;
        margin: 10px 15px;
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .avatar {
        width: 110px;
        height: 110px;
        margin-top: 50px;
        border-radius: 50%;
        object-fit:cover;
      }

      .username {
        font-weight: bold;
        font-size: 16px;
        margin-top: 10px;
        color: #666;
      }

      .vip {
        margin-top: 20px;
        display: flex;
        align-items: center;

        .level {
          display: flex;
          align-items: center;
          padding: 3px 7px;
          border-radius: 15px;
          background-color: $theme-color-1;
          color: #fff;

          img {
            width: 17px;
            height: 17px;
            margin-left: 3px;
          }
        }

        .upgrade {
          margin-left: 15px;
          color: #666;
          border-bottom: 1px solid #eee;
        }
      }
    }

    .statistics {
      width: $statistics-width;
      border: solid 1px #e2e2e2;
      $title-height: 40px;
      $content-height: calc(100% - #{$title-height});

      .title {
        height: $title-height;
        background-color: #fbd59f;
        color: $theme-color-1;
        display: flex;
        align-items: center;
        padding-left: 15px;
        font-size: 14px;
      }

      .content {
        height: $content-height;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .item {
          color: $theme-color-1;
          font-size: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .count {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 10px;

            .unit {
              font-size: 14px;
              font-weight: normal;
              color: #000;
              display: inline;
            }
          }
        }
      }
    }
  }

  .todo {
    @extend %card;
    margin-bottom: 40px;

    .content {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        font-size: 16px;
        color: #666;
        display: flex;
        flex-direction: column;
        align-items: center;

        .count {
          font-size: 30px;
          color: #0085e8;
          font-weight: bold;
          margin-bottom: 10px;
          display: flex;
          align-items: flex-end;

          .unit {
            font-size: 14px;
            color: #666;
            font-weight: normal;
            position: relative;
            top: -6px;
          }
        }

        .name {
          margin-bottom: 15px;
          font-size: 15px;
        }

        .button {
          background-color: rgb(243, 244, 247);
          padding: 4px 18px;
          border-radius: 10px;
          font-size: 14px;

          &:hover {
            color: #fff;
            background-color: #0085e8;
          }
        }
      }
    }
  }

  .rights {
    @extend %card;
    margin-bottom: 40px;

    .title {
      display: flex;
      justify-content: space-between;

      .more {
        margin-right: 15px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: normal;

        img {
          margin-left: 5px;
          width: 8px;
          height: 10px;
        }
      }
    }

    .content {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        width: 205px;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #4d4d4d;
        background: url("~@/assets/images/bg-1.jpg");
        background-size: 100% 100%;
        padding-bottom: 20px;

        .name {
          font-size: 15px;
          margin-bottom: 10px;
        }

        .price {
          font-weight: bold;
          font-size: 20px;
        }

        .unit {
          font-weight: bold;
          font-size: 20px;
        }
      }

      .item:nth-of-type(2) {
        background-image: url("~@/assets/images/bg-2.jpg");
      }

      .item:nth-of-type(3) {
        background-image: url("~@/assets/images/bg-3.jpg");
      }

      .item:nth-of-type(4) {
        background-image: url("~@/assets/images/bg-4.jpg");
      }
    }
  }

  .purchase {
    @extend %card;
    height: auto;

    .content {
      padding: 15px;

      .line-chart {
        .title {
          color: #666;
          margin-bottom: 15px;
        }

        .line-chart {
          height: 260px;
        }
      }

      .ranking {
        display: flex;
        justify-content: space-between;

        .item {
          width: 410px;

          .title {
            height: 50px;
            background-color: $theme-color-1;
            color: #fff;
            font-size: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 15px;

            img {
              margin-left: 10px;
              margin-right: 15px;
              position: relative;
              top: 2px;
            }
          }

          .list {
            border-right: solid 1px #e2e2e2;
            border-left: solid 1px #e2e2e2;
            border-bottom: solid 1px #e2e2e2;

            .list-item {
              padding: 12px 20px;
              display: flex;
              position: relative;
              font-size: 14px;
              color: #666;

              .name {
                position: absolute;
                left: 65px;
              }

              .value {
                position: absolute;
                right: 0;
                margin-right: 20px;
              }

              &:nth-child(odd) {
                background-color: #fff;
              }

              &:nth-child(even) {
                background-color: #f3f4f7;
              }

              &:hover {
                color: $theme-color-1;
              }
            }
          }
        }
      }
    }
  }
}
</style>
